import {
	Primary,
	Controls,
	Stories,
	Meta,
	ArgTypes,
} from '@storybook/addon-docs/blocks';

import * as FieldRichTextAreaStories from './FieldRichTextarea.stories.js';

<Meta of={FieldRichTextAreaStories} />

# FieldRichTextArea

## Usage

Use this component to provide the user with a rich text editor that supports bold, italics, links and other HTML code. This component uses the TinyMCE editor. You can pass `toolbar`, `plugins` and `init` props to customize the editor. See the [TinyMCE documentation](https://www.tiny.cloud/docs/configure/integration-and-setup/).

The `size` of the input area will signal to the user how much information they should enter into the field. The default `size` is best for one to two large paragraphs. If you expect a user to enter more than that, consider using the large size when it fits appropriately within the the form where it appears.

## Image Uploads

The editor will support image uploads, which are placed in the user's directory in the `public` files directory. You must provide the URL to the public files API and add the plugin and toolbar button.

```js
{
	...
	uploadUrl: 'http://journal.com/api/v1/_uploadPublicFile',
	toolbar: 'bold italic | link | image',
	plugins: ['link','image']
}
```

The image upload will _not_ work in this documented example. It requires a valid upload URL. Use the following to get the `uploadUrl` from within a PKP application:

```php
$dispatcher = Application::get()
	->getRequest()
	->getDispatcher();

$uploadUrl = $dispatcher->url(
	Application::get()->getRequest(),
	ROUTE_API,
	$context->getPath(),
	'_uploadPublicFile'
);
```

Users must be logged in to upload files.

<Primary />
<Controls />
